<template>
  <div id="tab-bar" class="mybody">
    <div>
      <mt-tab-container class="page-tabbar-container" v-model="selected" :style="backgroundDiv">
        <mt-tab-container-item id="main">
          <main-div></main-div>
        </mt-tab-container-item>
        <mt-tab-container-item id="tool">
          <tool-div></tool-div>
        </mt-tab-container-item>
        <mt-tab-container-item id="my">
          <my-div></my-div>
        </mt-tab-container-item>
        <mt-tab-container-item id="words">
          <words-div></words-div>
        </mt-tab-container-item>
      </mt-tab-container>

      <mt-tabbar v-model="selected" fixed>
        <mt-tab-item id="main">
          <img slot="icon" src="../assets/home-4-line.png">单词
<!--          <router-link to="/main">单词</router-link>-->
        </mt-tab-item>
        <mt-tab-item id="tool">
          <img slot="icon" src="../assets/book-line.png">词典
<!--          <router-link to="/tool">词典</router-link>-->
        </mt-tab-item>
        <mt-tab-item id="words">
          <img slot="icon" src="../assets/book-open-line.png">词汇
          <!--          <router-link to="/my">我</router-link>-->
        </mt-tab-item>
        <mt-tab-item id="my">
          <img slot="icon" src="../assets/settings-line.png">设置
<!--          <router-link to="/my">我</router-link>-->
        </mt-tab-item>

      </mt-tabbar>
    </div>

  </div>
</template>

<script>
  import Main from "./Main";
  import Tool from "./Tool";
  import My from './My'
  import Words from "./Words";
    export default {
        data(){
          return{
            backgroundDiv: {
              backgroundImage:'url(' + require('../assets/pic01.png') + ')',
              backgroundRepeat:'no-repeat',
              backgroundSize:'100% 100%',
              with:'100px',
              height:'610px'
            },
            selected:'main',
            img1:'1.png',
            img3:'3.png',
            img5:'5.png',
            // 默认的选中情况
          }
        },
        components:{
          'main-div':Main,
          'my-div':My,
          'tool-div':Tool,
          'words-div':Words
        },
        methods:{
          // 改变选中 tab 的状态，根据状态来改变要显示选中与否的图片
          changeState(n){
            for(var i=0;i<this.currentIndex.length;i++){
              if(i==n){ // 当前选中的为 true
                this.currentIndex[i].isSelect = true
              }else { // 其它的为 false
                this.currentIndex[i].isSelect = false
              }
            }
          }
        },
        created() {
        }
    }
</script>

<style scoped>
  .mybody{
    border:1px solid #a09e9d;position:fixed;top:0px;float:inherit;width:100%;
    /*top: 0px;*/
    left: 0px;
  }
</style>
